<template>
  <view class="goods-list">
    <view v-for="(goods, i) in goodsList" :key="i" @click="gotoDetail(goods)">
      <my-goods :goods="goods" ></my-goods>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      queryObj: {
        query: '', // 关键字 - 从搜索search页面跳转的
        cid: '', // 分类id - 从cate页面跳转
        pagenum: 1, // 页码
        pagesize: 10 // 每页显示多少条
      },
      goodsList: [], // 商品列表
      total: 0, // 总数量用来分页
      defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
      isLoading: false,
    };
  },
  onLoad(options) {
    // options - 跳转过来的页面参数
    this.queryObj.query = options.query || '';
    this.queryObj.cid = options.cid || '';
    this.getGoodsList();
  },
  // 上拉触底刷新 钩子函数
  onReachBottom() {
    // 判断数据是否加载完毕
    if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total){
      return uni.$showMsg('数据加载完毕')
    }
    // 使用节流阀 管控下拉刷新获取数据 
    if(this.isLoading) return
    this.queryObj.pagenum += 1 // 将商品列表请求页码+1
    this.getGoodsList(); // 重新调用数据
  },
  // 下拉刷新钩子函数
  onPullDownRefresh(){
    // 重置关键数据
    this.queryObj.pagenum = 1
    this.total = 0
    this.isLoading = false
    this.goodsList = []
    // 重新获取数据
    this.getGoodsList(()=> uni.stopPullDownRefresh())
  },
  methods: {
    async getGoodsList(callback) {
      // 打开节流阀 无法触发下拉刷新
      this.isLoading = true
      const { data: res } = await uni.$http.get('/goods/search', this.queryObj);
      // 数据请求成功关闭节流阀 可以触发下拉刷新
      this.isLoading = false
      // 当下拉刷新 重置数据后再次获取数据后就关闭下拉刷新loading状态
      callback && callback()
      // console.log(res);
      if (res.meta.status !== 200) {
        //请求失败时
        return uni.$showMsg();
      }
      // console.log(res);
      let { pagenum, goods, total } = res.message; // 数据请求成功
      this.total = total;
      // 下拉刷新触底 要合并新数据
      this.goodsList = [...this.goodsList, ...goods];
    },
    // 跳转商品详情
    gotoDetail(goods){
      uni.navigateTo({
        url: '/subpkg/goods_detail/goods_detail?goods_id='+goods.goods_id
      })
    }
  }
};
</script>

<style lang="scss">
</style>
